<template>
	<view class="content">
		<view class="img_content content">
			<image v-for="(item,index) in goodsInfo.details" :src="item" :key="index" mode="widthFix"></image>
		</view>
		<view class="Bottom_View content">
			<view class="buyButton content" @click="buyNow()"><text>现在购买</text></view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" :mask-click="true" :safe-area="false" type="dialog">
			<view class="maskView column">
				<image class="icon_close" :src="staticUrl + '/image/icon_close.png'" @click="closePopup()"></image>
				<view class="pro_info row">
					<image class="pic" :src="goodsInfo.thumbnail" mode="aspectFill"></image>
					<!-- <view class="right column"> -->
					<text class="price">{{goodsInfo.price}}<text style="font-size: 20rpx;">/爱豆</text></text>
						<!-- <text class="stock">库存：50</text>
						<text class="tit">规格：红色</text> -->
					<!-- </view> -->
				</view>
				<!-- 分割线 -->
				<view class="line"></view>
				<!-- 商品规格 -->
				<!-- <text v-if="goodsInfo.specs !=''" class="s-tit">商品信息</text>
				<view v-if="goodsInfo.specs !=''" class="goodsInfoView">
					<view class="attr_Item"  v-for="(item,index) in goodsAttrInfo" :key="index" :style="{borderColor:(choiceInfoItem == index?borderColor_blue:borderColor_white)}"   @click="choiceType(index)">
						<text v-if="choiceInfoItem == index" style="color: #1890ff;">{{item}}</text>
						<text v-else style="color: #333333;">{{item}}</text>
					</view>
				</view> -->
				
				<!-- 选择数量  -->
				<view class="choiceNumView">
					<text class="s-tit">数量</text>
					<uni-number-box v-model="buyNumber" :min="1" :max="999"></uni-number-box>
				</view>
				<view class="enterInfo content" @click="enterInfo()"><text>确认</text></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from "@/config.js";
export default {
	data() {
		return {
			staticUrl:this.$config.StaticUrl,
			goodsInfo:{}, //商品的信息
			goodsAttrInfo:[], //商品的属性信息
			choiceAttr:'',  //选中的商品属性
			choiceInfoItem:0,
			borderColor_white:'#FFFFFF',
			borderColor_blue:'#1890ff',
			buyNumber:1,
		};
	},
	onLoad(option) {
		console.log('onload plus');
		let goodsInfo = JSON.parse(option.content);
		if (goodsInfo != null || goodsInfo != undefined) {
			console.log(option.content);
			this.goodsInfo = goodsInfo; 
			this.goodsAttrInfo = goodsInfo.specs.trim().split(" ");
			uni.setNavigationBarTitle({
				title:goodsInfo.name
			});
		};
	},
	onShow() {
		console.log('onshow!!!');
	},
	onReady(){
		// 给属性赋初值
		this.choiceAttr = this.goodsAttrInfo[0];
	},
	methods: {
		buyNow() {
			this.$refs.popup.open('bottom');
		},
		closePopup() {
			this.$refs.popup.close();
		},
		choiceType(index){
			this.choiceAttr = this.goodsAttrInfo[index];
			this.choiceInfoItem = index;
		},
		// 确认购买信息
		enterInfo(){
			let that = this;
			let goodsInfo = that.goodsInfo;
			goodsInfo.choiceAttr = that.choiceAttr;
			goodsInfo.quantity = that.buyNumber;
			// 删除一些无用的元素
			delete goodsInfo.specs;
			// delete goodsInfo.details;
			delete goodsInfo.isEiGoods;
			delete goodsInfo.isDisplay;
			uni.navigateTo({
				url: '../fillOrderInfo/fillOrderInfo?goodsInfo='+ JSON.stringify(goodsInfo)
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fafafa;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.img_content {
	width: 100%;
	margin-bottom: 180rpx;
}
.Bottom_View {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 90;
	width: 100%;
	height: 150rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.2);
	box-sizing: content-box;
}
.buyButton {
	width: 80%;
	height: 80rpx;
	border-radius: 50px;
	background-color: #ff536f;
}
.enterInfo{
	width: 80%;
	height: 80rpx;
	margin: 24rpx auto;
	border-radius: 50px;
	color: white;
	background-color: #ff536f;
}
.buyButton text {
	color: white;
}

/* 蒙版 */
.maskView {
	width: 750rpx;
	/* height: 800rpx; */
	background-color: #fff;
	border-radius: 10rpx 10rpx 0 0;
	/* position: relative; */
}
.icon_close {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	top: 26rpx;
	right: 35rpx;
}
/* 头部 */
.pro_info {
	width: 100%;
	height: 200rpx;
	padding: 30rpx 32rpx 16rpx;
}
.right {
}
.price {
	font-size: 36rpx;
	color: #FF2727;
	font-weight: 700;
}
.stock {
	margin-bottom: 20rpx;
	font-size: 24rpx;
	color: #999;
}
.tit {
	line-height: 1.4;
	font-size: 24rpx;
	color: #333;
}
.row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
}
.column {
	display: flex;
	flex-direction: column;
}
.pic {
	flex-shrink: 0;
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
	background-color: #f7f7f7;
	border-radius: 10rpx;
}
.line {
	width: 702rpx;
	height: 2rpx;
	margin-left: 24rpx;
	margin-top: 20rpx;
	background-color: #eeeeee;
}
.goodsInfoView {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 32rpx;
	padding-right: 20rpx;
}
.s-tit {
	margin-left: 42rpx;
	font-size: 30rpx;
	color: #333;
	font-weight: 700;
	line-height: 90rpx;
}
.attr_Item {
	display: flex;
	align-items: center;
	padding: 10rpx;
	margin: 10rpx;
	border-radius: 12rpx;
	background-color: #f5f5f5;
	border-width: 2rpx;
	border-style: solid;
}
.attr_Item image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}
.choiceNumView{
	width: 702rpx;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
